<template>
  <a-modal :visible="addKanbanVisible" title="创建可视化看板" @ok="addKanban" @cancel="cancel">
    <a-form ref="formRef" :rules="rules" layout="vertical" :model="from">
      <a-form-item label="看板名称" name="name" required>
        <a-input v-model:value="from.name" placeholder="请输入看板名称" />
      </a-form-item>
      <a-form-item label="描述" name="describe">
        <a-textarea
          v-model:value="from.describe"
          placeholder="请输入描述"
          :auto-size="{ minRows: 2, maxRows: 5 }"
        />
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script>
  import { useStore } from 'vuex';
  import { computed, reactive, toRefs, ref } from 'vue';
  import { useRouter, useRoute } from 'vue-router';

  export default {
    setup(props) {
      const store = useStore();
      const route = useRoute();
      const router = useRouter();

      const state = reactive({
        from: {
          name: '',
          describe: '',
        },
        formRef: ref(),
      });

      const rules = {
        name: [
          { required: true, message: '请输入看板名称', trigger: 'blur' },
          { min: 1, max: 30, message: '看板名称最多输入30个字符', trigger: 'blur' },
        ],
        describe: [{ max: 200, message: '描述最多输入200个字符', trigger: 'blur' }],
      };

      const cancel = () => {
        store.commit('common/setParams', { addKanbanVisible: false });
      };

      const addKanban = () => {
        state.formRef.validate().then(() => {
          store.dispatch('kanban/addKanban', state.from).then((res) => {
            if (/\/dashboard/.test(route.path)) {
              router.replace('/dashboard/' + res.data._id);
            }
            cancel();
          });
        });
      };

      return {
        ...toRefs(state),
        addKanbanVisible: computed(() => store.state.common.addKanbanVisible),
        addKanban,
        cancel,
        rules,
      };
    },
  };
</script>
